<template>
  <div>
    <!-- <div class="item_title">
      <div>返回</div>
      <div>{{ movieObj.nm }}</div>
      <div></div>
    </div> -->
    <!-- 插槽 -->
    <header1>{{ movieObj.nm }}</header1>
    <div class="top">
      <img class="mao" src="@/assets/logo.png" />
      <div class="right">
        <p>发现最新最热电影</p>
        <div class="jt">打开App <img src="@/assets/jt.png" /></div>
      </div>
    </div>
    <div class="itemcon">
      <img :src="movieObj.img" alt="" />
      <div class="right">
        <p class="R1">{{ movieObj.nm }}</p>
        <p class="R2">{{ movieObj.wish }}人想看</p>
        <p class="R3">{{ movieObj.cat }}</p>
        <p class="R4">{{ movieObj.src }}/{{ movieObj.dur }}</p>
        <p class=R5>{{ movieObj.pubDesc }}</p>
      </div>
      <div></div>
    </div>
    <div class="date-list">
      <ul>
        <!-- 2.时间列表添加 点击事件 ，传参数 -->
        <li
          v-for="(item, index) in dateArr"
          :key="item.date"
          @click="getCinemaData(item.date, index)"
          :class="index == activeid ? 'active' : ''"
        >
          {{ item.date | format(index) }}
        </li>
      </ul>
    </div>

    <div class="itemline">
      <div class="line1">
        全城
        <div class="lineIn1"></div>
      </div>
      <div class="line2">
        品牌
        <div class="lineIn2"></div>
      </div>
      <div class="line3">
        特色
        <div class="lineIn3"></div>
      </div>
    </div>
    <!-- 影院信息 -->
    <ul class="cinemalist">
      <li v-for="item in cinemaArr" :key="item.id">
        <div>{{ item.nm }}</div>
        <div>{{ item.labels }}</div>
        <div>{{ item.addr }}</div>

        <div></div>
        <div></div>
      </li>
    </ul>
  </div>
</template>

<script>
/*
0. 获取 影院信息的函数
1.页面开始加载调用 影院信息
2.给 时间列表添加 点击事件 ，传参数
3.点击事件绑定的函数  
*/

import axios from "axios";
//引入头部组件
import header1 from "@/components/commonh/header1";
export default {
  name: "item",
  data: function () {
    return {
      movieObj: {}, //电影的一条记录
      dateArr: [], //保存上映日期的数据
      cinemaArr: [], //影院信息
      id: 0, //电影id
      activeid: 0, //当前是第几天
    };
  },
  filters: {
    //过滤器  将 年月日转成  星期再加 月日
    //bug: 获取 今天的日期  ，和  传过来的日期比较
    format(value, index) {
      var arr = value.split("-");
      var str = "";
      var jintian = ["今天", "明天", "后天"];
      //传过来的日期
      var d1 = new Date(value);
      //今天的日期
      var dd = new Date();
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();

      var d2 = new Date(y + "-" + m + "-" + d);
      console.log(y + "-" + m + "-" + d);
      //0 今天  1 明天  2 后天
      var iday = parseInt(parseInt(d1 - d2) / 1000 / 60 / 60 / 24);
      console.log(iday);
      if (jintian[iday] != undefined) {
        str = jintian[iday];
      } else {
        str = `周${"日一二三四五六".charAt(new Date(value).getDay())}`;
      }
      str += `${arr[1]}月${arr[2]}日`;
      return str;
    },
  },
  methods: {
    //3.重新获取影院数据
    getCinemaData(date, index) {
      //更改当前的日期
      this.activeid = index;
      this.getData(date);
    },
    //0.获取影院信息的函数
    getData(date) {
      axios
        .get(
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=" +
            this.id +
            "&serviceId=-1&stationId=-1&showDate=" +
            date +
            "&cityId=30&ci=30"
        )
        .then((res) => {
          //console.log(res);
          //获取了新数据会给  this.cinemaArr 重新赋值，页面就会重新渲染
          this.cinemaArr = res.data.data.cinemas;
        });
    },
  },
  mounted() {
    //获取 首页传过来的参数
    this.id = this.$route.params.id;
    axios.get("/api/mtrade/mmdb/movie/v5/" + this.id + ".json").then((res) => {
      console.log(res);
      this.movieObj = res.data.data.movie;
      this.movieObj.img = this.movieObj.img.replace("w.h", "110.150");
    });

    //获取 上映日期的数据
    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=" +
          this.id +
          "&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log(res);
        this.dateArr = res.data.data.dates;
        //1.获取影院信息
        this.getData(this.dateArr[0].date);
      });
  },
  components: {
    header1,
  },
};
</script>

<style scoped>
 .top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 414px;
  height: 60px;
}
 .top .mao {
  width: 94px;
  height: 39px;
}
 .top .right {
  display: flex;
  align-items: center;
}
 .top .right p {
  height: 14px;
  padding-right: 8px;
  border-right: 1px rgb(239 230 230) solid;

  font-family: PingFangSC-Regular,Arial,Helvetica,sans-seri;
  font-weight: 620;
  color: #666;
  text-decoration: none;
}
 .top .right .jt {
  display: flex;
  font-weight: bold;
  font-size: 16px;
  align-items: center;
  margin-left: 3px;
  color: #b37e7e;
}
 .top .right .jt img {
  width: 15px;
  height: 15px;
}
.itemcon {
  width: 414.4px;
  height: 150px;
  padding: 19px 30px 19px 15px;
  display: flex;
   background: -webkit-radial-gradient(#2E2F34, #3D3A34, #2E2F34);
  background: -o-radial-gradient(#2E2F34, #3D3A34, #2E2F34);
  background: -moz-radial-gradient(#2E2F34, #3D3A34, #2E2F34);
  background: radial-gradient(#2E2F34, #3D3A34, #2E2F34);
}
.itemcon img{
  width: 110px;
  height: 150px;
}
.itemcon .right{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: white;
}
.itemcon .right .R1{
  font-size: 20px;
    margin-top: 2px;
    font-weight: 700;
    overflow: hidden;
}
.itemcon .right .R2 {
    font-size: 18px;
    font-weight: 700;
    color: #fc0;
}
.itemcon .right .R3,.itemcon .right .R4,.itemcon .right .R5{
  line-height: 1;
  color: rgb(177, 167, 167);
  
}

.itemline {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 40px;
  color: #777;
  font-size: 14px;
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
}
.line2,
.line1,
.line3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-right: 1px rgb(185, 179, 179) solid;
}

.lineIn1,
.lineIn2,
.lineIn3 {
  width: 0;
  height: 0;
  /* 正方形 */
  border: 4px solid #b0b0b0;
  /* 转变三角形 */
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  display: inline-block;
  margin-top: 5px;
  margin-left: 4px;
}
.cinemalist li {
  width: 100%;
  height: 143px;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
.date-list {
  width: 100%;
  height: 45px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  overflow: scroll;
}
.date-list ul {
  width: 1200px;
  display: flex;
}
.date-list ul li {
  width: 130px;
  height: 45px;
  line-height: 45px;
  text-align: center;
}
.date-list ul li.active {
  border-bottom: 2px solid #f03d37;
  color: #f03d37;
}
/* .item_title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #e54848;
  display: flex;
  justify-content: space-around;
}
.item_title div:nth-of-type(1),
.item_title div:nth-of-type(3) {
  width: 15%;
  text-align: center;
}
.item_title div:nth-of-type(2) {
  width: 70%;
  text-align: center;
} */
</style>